<template>
  <div
    class="search-suggest-item"
    @click="$emit('changeKeyWord', item.keyword)"
  >
    <div class="left icon_base"></div>

    <div class="right" v-html="hightlight"></div>
  </div>
</template>

<script>
export default {
  name: "SearchSuggestItem",
  props: {
    item: Object,
    keywords: String,
  },
  computed: {
    // 关键字高亮
    hightlight() {
      if (!this.keywords) {
        return this.item.keyword;
      }
      // 处理关键字中的空格，将空格替换为 .*
      const processedKeywords = this.keywords.replace(/\s/g, ".*");
      const keywordRegex = new RegExp(processedKeywords, "gi");
      return this.item.keyword.replace(keywordRegex, (match) => {
        console.log("match => ", match);
        return `<span class="highlight">${match}</span>`;
      });
    },
  },
};
</script>
<style lang="less">
.search-suggest-item {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #b5a7a7;

  .left {
    width: 40px;
    height: 100%;
    background-image: url("../../assets/kugou/搜索.png");
  }

  .middle {
    flex: 1;
  }
  .highlight {
    color: skyblue;
  }

  &:last-of-type {
    border-bottom: none;
  }
}
</style>
